<template>
    <van-config-provider :theme-vars="themeVars">
        <van-nav-bar title="菜谱大全" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-config-provider>


    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in state.data" :key="item + 'swipe'">
            <img :src="item.img" alt="">
        </van-swipe-item>
    </van-swipe>

    <van-search placeholder="请输入搜索关键词" input-align="center" />

    <div class="taile">
        热门分类
    </div>


    <!-- <div v-for="item in hotfood.data" :key="item + 'hot'">
    </div> -->
    <van-grid :column-num="4">
        <van-grid-item v-for="item in hotfood.data" :key="item + 'hot'" :text="item.title" />
        <van-grid-item text="更多..." />
    </van-grid>


    <div class="taile">
        精品分类
    </div>
    <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="item in goodfood.data" :key="item + 'goodfood'" @click="toDeilt(item)">
            <van-image :src="item.img" />
            <h4>{{ item.name }}</h4>
            <div class="Dd">
                <p>
                    <span>{{ item.all_click }}浏览</span>&emsp;
                    <span>{{ item.favorites }}收藏</span>
                </p>
            </div>

        </van-grid-item>
    </van-grid>
</template>

<script setup lang="ts">
import router from '@/router';
import link from '@/utils/apis';
import { onMounted, ref, reactive } from 'vue';
const themeVars = reactive({
    navBarIconColor: "#f7f8fa",
    navBarTextColor: "#f7f8fa",
    navBarTitleTextColor: "#f7f8fa",
    navBarBackground: "rgb(255, 108, 12)",
});

const onClickLeft = () => history.back();
const toDeilt = (item: any) => {
    console.log(item.id);
    router.push("/deilt?id" + item.id)
}
const state = ref({
    data: []
}) as any
const hotfood = ref({
    data: []
}) as any
const goodfood = ref({
    data: []
}) as any
onMounted(async () => {
    link("/swiper", "GET").then((res: any) => {
        console.log(res.data, "111");
        console.log(res.data.resp.data[0].img);
        state.value.data = res.data.resp.data
    })
    link("/hot", "GET").then((res: any) => {
        console.log(res.data.data, "222");
        hotfood.value.data = res.data.data
    })
    link("https://api.i-lynn.cn/cookbook", "GET").then((res: any) => {
        console.log(res.data.data, "333");
        goodfood.value.data = res.data.data
    })

})


</script>

<style scoped>
.van-swipe-item img {
    width: 100%;
    height: 100%;
}

.dt {
    width: 100%;
    height: 100%;
}

.taile {
    text-align: left;
    text-indent: 1rem;
    line-height: 32px;
    color: rgb(125, 126, 127);
    font-size: 16px;
}

.Dd {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.1rem;
    font-size: 0.12rem;
    color: #c0c0c0;
    margin-top: 0.08rem;

}
</style>